<template>
  <div class="app-wrapper">
    <header>
      <div class="padding-wrapper">
        <div class="nav-wrapper">
          <div class="logo"></div>
          <TheNavBar :navItems="navItems" class="nav-bar"></TheNavBar>
          <div class="btn-wrapper">
            <button @click="isExtend = !isExtend"></button>
          </div>
        </div>
        <div class="search-input-wrapper">
          <TheSearchInput></TheSearchInput>
        </div>
      </div>
    </header>
    <main>
      <div class="padding-wrapper">
        <section class="article-wrapper">
          <TheArticleList :articleList="articleList"></TheArticleList>
        </section>
        <aside class="user-panel-wrapper">
          <TheUserPanel
            class="user-panel"
            :style="{ top: scrollTop }"
          ></TheUserPanel>
        </aside>
      </div>
    </main>
    <div
      @click="isExtend = false"
      class="drawer-nav-wrapper"
      :class="{ show: isExtend }"
    >
      <TheDrawerNavPanel :navItems="navItems"></TheDrawerNavPanel>
    </div>
  </div>
</template>

<script lang="ts">
import TheSearchInput from "@/components/TheSearchInput.vue";
import TheNavBar from "@/components/TheNavBar.vue";
import TheArticleList from "@/components/TheArticleList.vue";
import TheUserPanel from "@/components/TheUserPanel.vue";
import TheDrawerNavPanel from "@/components/TheDrawerNavPanel.vue";
import { onMounted, reactive, toRefs } from "vue";

export default {
  name: "App",
  components: {
    TheSearchInput,
    TheNavBar,
    TheArticleList,
    TheUserPanel,
    TheDrawerNavPanel,
  },
  setup() {
    const data = reactive({
      scrollTop: "0px",
      //是否显示遮罩层
      isExtend: false,
      //导航项内容
      navItems: [
        { name: "博客", index: 0 },
        { name: "随笔", index: 1 },
      ],
      articleList: [
        {
          title: "如何编写一些模拟的数据",
          description:
            "大部分写代码的人都避免不了跟数据打交道，但创建适应的数据来体现当前工作的成果一直是一件很让人头疼的事情。尽管我们可以通过仿照相类似App的...",
          time: "2020-11-03 18:25",
        },
      ],
    });
    //监听滚动条用以调整信息面板的位置
    const handleScroll = () => {
      if (document.documentElement && document.documentElement.scrollTop) {
        const scrollTop = document.documentElement.scrollTop;
        data.scrollTop = scrollTop + "px";
      }
    };

    onMounted(() => {
      window.addEventListener("scroll", handleScroll, true);
    });
    return { ...toRefs(data) };
  },
};
</script>

<style lang="scss" scoped>
.app-wrapper {
  width: 100%;
  height: 100%;
  header {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    background: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    .padding-wrapper {
      margin: 0 8% 0 12%;
      height: 100%;
      display: grid;
      grid-template-columns: auto 275px;
      .nav-wrapper {
        min-width: 500px;
        height: 100%;
        display: flex;
        align-items: center;
        .logo {
          margin-left: 6px;
          width: 36px;
          height: 36px;
          background: url("./assets/logo.png");
          background-size: cover;
        }
        .btn-wrapper {
          display: none;
        }
      }
      .search-input-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  main {
    width: 100%;
    height: 100%;
    .padding-wrapper {
      padding-top: 56px;
      margin: 0 8% 0 12%;
      height: 100%;
      display: grid;
      grid-template-columns: auto 275px;
      .article-wrapper {
        height: 100%;
        min-width: 500px;
        padding: 10px 20px;
        box-shadow: 0 0 10px rgb(156, 156, 156);
      }
      .user-panel-wrapper {
        margin-right: 6px;
        position: relative;
        padding: 16px 20px;
        box-shadow: 0 0 10px rgb(156, 156, 156);
        .user-panel {
          transition: 1s;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
  }
}
@media screen and (max-width: 860px) {
  .app-wrapper {
    header {
      .padding-wrapper {
        display: flex;
        margin: 0;
        .nav-wrapper {
          width: 100%;
          display: flex;
          justify-content: space-between;
          min-width: 300px;
          .nav-bar {
            display: none;
          }
          .btn-wrapper {
            margin-right: 10px;
            cursor: pointer;
            display: flex;
            width: 30px;
            height: 100%;
            align-items: center;
            button {
              border: none;
              outline: none;
              cursor: pointer;
              margin-left: 4px;
              width: 22px;
              height: 20px;
              background: linear-gradient(#fff 50%, rgb(37, 37, 37) 50%);
              background-size: 100% 6.4px;
              background-position: 2px 0;
            }
          }
        }
        .search-input-wrapper {
          display: none;
        }
      }
    }
    main {
      display: block;
      margin: 0;
      width: 100%;
      .padding-wrapper {
        padding-top: 46px;
        margin: 0;
        grid-template-columns: auto;
        section {
          width: 100%;
          min-width: 300px;
        }
        aside {
          display: none;
        }
      }
    }
    .drawer-nav-wrapper {
      display: block;
      z-index: 10;
      position: fixed;
      top: 0;
      left: 110%;
      width: 100%;
      margin-top: 46px;
      height: calc(100% - 46px);
      background: rgba(0, 0, 0, 0.8);
    }
    .show {
      left: 0;
      nav {
        right: 0;
        transition: 0.5s;
      }
    }
  }
}
</style>